{% extends "_layouts/examples.html" %}
{% block title %}Vertical spacing by unit{% endblock %}

{% block content %}
<div class="row">
    <div class="col-2 col-medium-2">
        <p class="u-sv-3"><code>&lt;p&gt;</code> with .u-sv-3</p>
        <p>text below</p>
    </div>
    <div class="col-2 col-medium-2">
        <p class="u-sv-2"><code>&lt;p&gt;</code> with .u-sv-2</p>
        <p>text below</p>
    </div>
    <div class="col-2 col-medium-2">
        <p class="u-sv-1"><code>&lt;p&gt;</code> with .u-sv-1</p>
        <p>text below</p>
    </div>
</div>
<hr />
<div class="row">
    <div class="col-2 col-medium-2">
        <p class="u-sv1"><code>&lt;p&gt;</code> with .u-sv1</p>
        <p>text below</p>
    </div>
    <div class="col-2 col-medium-2">
        <p class="u-sv2"><code>&lt;p&gt;</code> with .u-sv2</p>
        <p>text below</p>
    </div>
    <div class="col-2 col-medium-2">
        <p class="u-sv3"><code>&lt;p&gt;</code> with .u-sv3</p>
        <p>text below</p>
    </div>
</div>
{% endblock %}
